<template>
  <div id="orderPayView">
    <div class="pay-title">填写订单</div>
    <el-card class="card-main" shadow="hover">
      <div class="card-title">地址选择</div>
      <div class="card-content">
        配送至：
        <address-select
          placement="right-end"
          show-detail
          style="font-size: 16px"
          @put-address="selectAddress"
        />
      </div>
    </el-card>
    <el-card class="card-main" shadow="hover">
      <div class="card-title">订单信息</div>
      <div class="card-content">
        <el-scrollbar max-height="360px">
          <div
            v-for="item in ordersItemList"
            :key="item.id"
            style="padding: 0 10px"
          >
            <div style="margin-bottom: 10px">
              <el-image
                :preview-src-list="[item.avatar || Img]"
                :src="item.avatar || Img"
                fit="contain"
                preview-teleported
                style="
                  width: 25px;
                  height: 25px;
                  border-radius: 2px;
                  vertical-align: middle;
                  margin-right: 5px;
                "
              />
              <el-text tag="b">{{ item.nickname }}</el-text>
            </div>
            <el-row :gutter="12">
              <el-col v-for="cart in item.cartInfo" :key="cart.id" :span="12">
                <el-row style="margin: 5px 0">
                  <el-col :span="6">
                    <el-image
                      :preview-src-list="[cart.goodsImage || Img]"
                      :src="cart.goodsImage || Img"
                      fit="contain"
                      preview-teleported
                      style="
                        width: 80px;
                        height: 80px;
                        border-radius: 5px;
                        display: block;
                        margin: 0 auto;
                      "
                    />
                  </el-col>
                  <el-col :span="17" style="padding: 5px">
                    <el-space fill size="small">
                      <el-text :line-clamp="1" size="large" tag="b">
                        {{ cart.goodsName }}
                      </el-text>
                      <el-text :line-clamp="1" size="small">
                        {{ cart.goodsSpecName }}
                      </el-text>
                      <el-text>
                        <el-space>
                          <el-text
                            v-if="cart.goodsScore < 1"
                            size="small"
                            tag="del"
                            >￥
                            {{ cart.goodsPrice }}
                          </el-text>
                          <el-text size="small" type="danger">
                            到手价￥
                            <el-text size="large" type="danger"
                              >{{
                                cart.goodsScore < 1
                                  ? cart.goodsScopePrice
                                  : cart.goodsPrice
                              }}
                            </el-text>
                          </el-text>
                          <el-text>数量x{{ cart.goodsNum }}</el-text>
                        </el-space>
                      </el-text>
                    </el-space>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-divider />
          </div>
        </el-scrollbar>
      </div>
    </el-card>
    <el-card class="card-main" shadow="hover">
      <div class="card-title">支付信息</div>
      <div class="card-content">
        <el-row>
          <el-col :span="18">
            <div>
              <el-space>
                <el-text> 支付方式：</el-text>
                <el-radio :model-value="1" :value="1" border size="small"
                  >支付宝
                </el-radio>
              </el-space>
            </div>
            <div style="margin: 10px 0">
              <el-space :size="32">
                <el-text> 应付 ￥{{ countPrice.price }}</el-text>
                <el-text>
                  优惠￥{{ countPrice.price.sub(countPrice.scorePrice) }}
                </el-text>
                <el-text>
                  实付
                  <el-text type="danger">
                    ￥
                    <span style="font-size: 18px">
                      {{ countPrice.scorePrice }}
                    </span>
                  </el-text>
                </el-text>
              </el-space>
            </div>
          </el-col>
          <el-col :span="6" style="display: flex; align-items: center">
            <el-button style="width: 80%" type="primary" @click="submitOrders"
              >立即支付
            </el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <div v-if="payFrom.length > 0" v-html="payFrom" ref="payRef"></div>
  </div>
</template>
<script lang="ts" setup>
import AddressSelect from "@/components/AddressSelect.vue";
import { useRoute, useRouter } from "vue-router";
import Img from "@/assets/logo.png";
import { nextTick, ref } from "vue";
import { CartShowVO, OrdersControllerService } from "@/api";
import { ElLoading, ElMessage } from "element-plus";
import Decimal from "decimal.js";

const route = useRoute();
const payNo = route.params.payNo;
// 获取订单列表信息
const ordersItemList = ref<CartShowVO[]>([]);
const countPrice = ref({
  subject: "",
  count: 0,
  price: new Decimal(0),
  scorePrice: new Decimal(0),
});

function getOrdersItem() {
  if (payNo) {
    OrdersControllerService.getOrdersDetailByPayNoUsingGet(payNo as any).then(
      (res) => {
        ordersItemList.value = res.data || [];
        if (ordersItemList.value.length === 0) {
          ElMessage.warning("没有订单数据！");
          return;
        }
        //获取统计数据
        for (let i = 0; i < ordersItemList.value.length; i++) {
          ordersItemList.value[i].cartInfo!.forEach((ordersItem) => {
            countPrice.value.price = countPrice.value.price.plus(
              ordersItem.goodsPrice
            );
            countPrice.value.scorePrice = countPrice.value.scorePrice.plus(
              ordersItem.goodsScopePrice
            );
            countPrice.value.count =
              countPrice.value.count + ordersItem.goodsNum;
          });
        }
      }
    );
  }
}

getOrdersItem();
//选择的地址
const addressId = ref<string>("");

function selectAddress(id: string) {
  console.log(id);
  addressId.value = id;
}

//结算订单
const router = useRouter();
const payFrom = ref("");
const payRef = ref();

function submitOrders() {
  if (ordersItemList.value.length === 0) {
    ElMessage.warning("没有订单数据，无法结算！");
    return;
  }
  if (!addressId.value) {
    ElMessage.warning("没有选择地址！");
    return;
  }

  countPrice.value.subject =
    ordersItemList.value[0].cartInfo[0].goodsName!.substring(0, 20) +
    "...等" +
    countPrice.value.count +
    "件";
  if (!payNo || !countPrice.value.subject) {
    ElMessage.warning("缺少参数，请检查！");
    return;
  }
  OrdersControllerService.getOrdersInfoUsingPut(
    addressId.value,
    payNo,
    countPrice.value.subject
  ).then((res) => {
    payFrom.value = res.data;
    nextTick(() => {
      const loading = ElLoading.service({
        lock: true,
        text: "跳转中...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (payRef.value) {
        payRef.value.children[0].submit();
        loading.close;
      }
    });
  });
}
</script>

<style lang="scss" scoped>
#orderPayView {
  width: 70%;
  margin: 0 auto;

  .pay-title {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: bolder;
  }

  :deep(.el-card) {
    .el-card__body {
      padding: 0;
    }
  }

  .card-main {
    margin: 10px auto;
    display: flex;
    flex-direction: column;

    .card-title {
      padding: 5px 10px;
      font-weight: bolder;
      height: 20px;
      background-color: #d9ecff;
      font-size: 12px;
    }

    .card-content {
      flex: 1;
      padding: 10px;
    }
  }
}
</style>
